<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title th:text="${classObj.id == null ? '创建新班级' : '编辑班级'} + ' - 企业培训平台'">创建/编辑班级 - 企业培训平台</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <style>
    /* 页面容器 */
    .container {
      max-width: 600px;
      margin: 30px auto;
      padding: 30px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    /* 页面标题 */
    .page-title {
      color: #007bff;
      text-align: center;
      margin-bottom: 30px;
      font-size: 2em;
      border-bottom: 2px solid #007bff;
      padding-bottom: 10px;
    }

    /* 表单组 */
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #343a40;
    }
    .form-group input[type="text"] {
      width: calc(100% - 22px); /* Adjust for padding and border */
      padding: 12px;
      border: 1px solid #ced4da;
      border-radius: 6px;
      font-size: 1em;
      box-sizing: border-box;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .form-group input[type="text"]:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
      outline: none;
    }

    /* 按钮容器 */
    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 30px;
    }

    /* 按钮样式 */
    .btn {
      padding: 12px 25px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1.1em;
      font-weight: bold;
      transition: background-color 0.3s ease, transform 0.2s ease;
    }
    .btn-primary {
      background-color: #007bff;
      color: white;
    }
    .btn-primary:hover {
      background-color: #0056b3;
      transform: translateY(-2px);
    }
    .btn-secondary {
      background-color: #6c757d;
      color: white;
    }
    .btn-secondary:hover {
      background-color: #5a6268;
      transform: translateY(-2px);
    }

    /* 消息提示框 */
    .alert {
      padding: 15px;
      margin-bottom: 20px;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .alert-success {
      color: #155724;
      background-color: #d4edda;
      border-color: #c3e6cb;
    }
    .alert-danger {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
    }
  </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="container">
  <h1 class="page-title" th:text="${classObj.id == null ? '创建新班级' : '编辑班级'}">创建/编辑班级</h1>

  <div th:if="${successMessage}" class="alert alert-success">
    <p th:text="${successMessage}"></p>
  </div>
  <div th:if="${errorMessage}" class="alert alert-danger">
    <p th:text="${errorMessage}"></p>
  </div>

  <form th:action="@{${classObj.id == null ? '/class/create' : '/class/edit'}}" th:object="${classObj}" method="post">
    <input type="hidden" th:field="*{id}" th:if="${classObj.id != null}" />

    <div class="form-group">
      <label for="className">班级名称:</label>
      <input type="text" id="className" th:field="*{className}" required placeholder="请输入班级名称">
    </div>

    <!-- Teacher ID is usually set by the backend based on logged-in user,
         or could be a dropdown if multiple teachers can manage a class.
         For simplicity, we'll assume it's handled by backend or not directly editable here.
         If you need to display it, you can add:
         <div class="form-group">
             <label for="teaId">教师ID:</label>
             <input type="text" id="teaId" th:field="*{teaId}" readonly />
         </div>
    -->

    <div class="form-actions">
      <a th:href="@{/class/manage}" class="btn btn-secondary">取消</a>
      <button type="submit" class="btn btn-primary" th:text="${classObj.id == null ? '创建班级' : '保存修改'}">保存</button>
    </div>
  </form>
</div>
</body>
</html>
